<template>
    <div class="face-recognition-container">
        <!-- 左侧菜单 -->
        <div class="left-menu">
            <div
                class="menu-item"
                :class="{ active: activeTab === 'face-recognition-check' }"
                @click="switchTab('face-recognition-check')"
            >
                <i class="fas fa-search"></i> <!-- Font Awesome 放大镜图标 -->
                <span>人脸识别打卡</span>
            </div>
            <!-- 可以添加更多菜单项 -->
            <!-- <div
                class="menu-item"
                :class="{ active: activeTab === 'other-feature' }"
                @click="switchTab('other-feature')"
            >
                <i class="fas fa-cog"></i> 
                <span>其他功能</span>
            </div> -->
        </div>

        <!-- 右侧内容 -->
        <div class="right-content">
            <!-- 查询功能 -->
            <div class="search-bar" v-if="activeTab === 'face-recognition-check'">
                <div class="search-input-container">
                    <i class="fas fa-search search-icon"></i> <!-- Font Awesome 放大镜图标 -->
                    <input
                        v-model="searchQuery"
                        type="text"
                        placeholder="请输入姓名"
                    />
                </div>
                <button @click="handleSearch">
                    <span>搜索</span>
                </button>
            </div>

            <!-- 数据表格 -->
            <div class="data-table" v-if="activeTab === 'face-recognition-check'">
                <table>
                    <thead>
                        <tr>
                            <th v-for="column in columns" :key="column">{{ column }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in paginatedData" :key="item.id">
                            <td>{{ item.year }}</td>
                            <td>{{ item.month }}</td>
                            <td>{{ item.id }}</td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.gender }}</td>
                            <td>{{ item.idCard }}</td>
                            <td>{{ item.status }}</td>
                            <td>{{ item.checkTime }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页组件 -->
            <div class="pagination" v-if="activeTab === 'face-recognition-check'">
                <button
                    :disabled="currentPage === 1"
                    @click="currentPage--"
                >
                    上一页
                </button>
                <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
                <button
                    :disabled="currentPage === totalPages"
                    @click="currentPage++"
                >
                    下一页
                </button>
            </div>

            <!-- 其他功能的内容 -->
            <div v-if="activeTab === 'other-feature'" class="other-content">
                <h2>其他功能</h2>
                <p>这里是其他功能的内容。</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

// 当前激活的菜单项
const activeTab = ref("face-recognition-check");

// 表格列名
const columns = ref([
    "年份",
    "月份",
    "编号",
    "姓名",
    "性别",
    "身份证",
    "状态",
    "人脸识别打卡时间",
]);

// 模拟数据（实际应从数据库获取）
const data = ref([
    {
        id: 1,
        year: "2023",
        month: "10",
        name: "张三",
        gender: "男",
        idCard: "123456789012345678",
        status: "人脸识别身份认证成功",
        checkTime: "2023-10-01 08:30:00",
    },
    {
        id: 2,
        year: "2023",
        month: "10",
        name: "李四",
        gender: "女",
        idCard: "987654321098765432",
        status: "人脸识别身份认证成功",
        checkTime: "2023-10-01 09:15:00",
    },
    // 更多数据...
]);

// 查询功能
const searchQuery = ref("");
const filteredData = ref(data.value);

// 分页功能
const currentPage = ref(1);
const pageSize = ref(10); // 每页显示的数据条数

// 计算分页后的数据
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredData.value.slice(start, end);
});

// 计算总页数
const totalPages = computed(() => {
    return Math.ceil(filteredData.value.length / pageSize.value);
});

// 处理搜索
const handleSearch = () => {
    if (searchQuery.value) {
        filteredData.value = data.value.filter((item) =>
            item.name.includes(searchQuery.value)
        );
    } else {
        filteredData.value = data.value;
    }
    currentPage.value = 1; // 搜索后重置到第一页
};

// 切换菜单项
const switchTab = (tab) => {
    activeTab.value = tab;
};

// 初始化数据
onMounted(() => {
    // 模拟从数据库获取数据
    // 实际应使用API调用
    console.log("数据加载完成");
});
</script>

<style scoped>
.face-recognition-container {
    display: flex;
    height: 100%;
}

/* 左侧菜单 */
.left-menu {
    width: 200px;
    background-color: #f5f5f5; /* 淡灰色背景 */
    padding: 20px;
    border-right: 1px solid #ddd; /* 右侧分割线 */
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #333;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
}

.menu-item:hover {
    background-color: #e0e0e0; /* 悬停背景色 */
}

.menu-item.active {
    background-color: #3498db; /* 激活背景色 */
    color: white;
}

.menu-item i {
    font-size: 24px; /* 图标大小 */
}

.menu-item span {
    font-size: 14px; /* 文字大小 */
}

/* 右侧内容 */
.right-content {
    flex-grow: 1;
    padding: 20px;
}

/* 查询功能 */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 400px; /* 缩短搜索栏宽度 */
}

.search-input-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    background-color: #fff;
}

.search-icon {
    font-size: 16px;
    color: #95a5a6;
    margin-right: 8px;
}

.search-input-container input {
    border: none;
    outline: none;
    flex-grow: 1;
    font-size: 14px;
}

.search-bar button {
    padding: 8px 16px;
    background-color: #3498db; /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.search-bar button:hover {
    background-color: #2980b9; /* 按钮悬停效果 */
}

/* 数据表格 */
.data-table {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-right: 1px solid #ddd; /* 列竖线分割 */
    border-bottom: 1px solid #ddd; /* 行横线分割 */
}

th:last-child,
td:last-child {
    border-right: none; /* 最后一列不加竖线 */
}

th {
    background-color: #3498db; /* 表头背景色 */
    color: white;
}

tr:hover {
    background-color: #f5f5f5; /* 行悬停效果 */
}

/* 分页组件 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination button {
    padding: 8px 16px;
    background-color: #3498db; /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.pagination button:disabled {
    background-color: #95a5a6; /* 禁用状态 */
    cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
    background-color: #2980b9; /* 按钮悬停效果 */
}

.pagination span {
    font-size: 14px;
    color: #333;
}

/* 其他功能的内容 */
.other-content {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>